<template>
  <el-row class="top">
    <el-col :span="8">
      <el-button 
        type="text"
        @click="modeChange" 
      >{{mode=='map'?'切换展示路径':'切换展示图谱'}}</el-button>
    </el-col>
    <el-col :span="16">
      <div class="right">
        <el-button v-show="mode=='map'" @click="subNum" icon="el-icon-zoom-out"></el-button>
        <div v-show="mode=='map'" class="text">{{num}}%</div>
        <el-button v-show="mode=='map'" @click="addNum" icon="el-icon-zoom-in"></el-button>
        <el-button v-show="mode=='map'" @click="rePos" icon="el-icon-aim" ></el-button>
      </div>
    </el-col>
  </el-row>
  
</template>

<script>
export default {
  name: 'map-scale-number',
  props: {
    num: {
      type: Number,
      default: 100
    },
    min: {
      type: Number,
      default: 25
    },
    max: {
      type: Number,
      default: 300
    },
    step: {
      type: Number,
      default: 25
    },
    mode: {
      type: String,
      default: 'map'
    }
  },
  methods: {
    subNum(){
      var num = this.num;
      num -= this.step;
      if(num<this.min){
        num=this.min;
      }
      this.scaleChange(num)
    },
    addNum(){
      var num = this.num;
      num += this.step;
      if(num>this.max){
        num=this.max;
      }
      this.scaleChange(num)
    },
    rePos(){
      this.scaleChange(this.num)
    },
    scaleChange(val){
      this.$emit('scalechange', val);
    },
    modeChange(){
      var newMode = 'map';
      if(this.mode == 'map'){
        newMode = 'list';
      }
      this.$emit('modechange', newMode)
    }
  }
}
</script>

<style lang="scss" scoped>
  .top {
    padding: 9px 20px;
    background-color: $color-gray1;
    .left {
      
    }
    .right {
      width: 100%;
      min-width: 180px;
      height:32px;
      text-align: right;
      font-size: 0;
      .text {
        width: 36px;
        height:32px;
        line-height: 32px;
        text-align: center;
        font-size: $font-size12;
        color: $color-222;
        display: inline-block;
      }
      ::v-deep .el-button {
        padding: 4px 7px;
        margin: 0 10px;
        border: 1px $color-gray2 solid;
        i {
          font-size: $font-size16;
        }
      }
    }
  }
  
</style>